<template>
  <section class="bo-swiper-container" ref="swiper" @wheel="throttleWheel" @mousedown.capture="mousedown" @mouseup.capture="mouseup">
    <div class="bo-swiper-body" ref="body" :style="{'margin-top': top}">
      <slot />
    </div>
  </section>
</template>

<script>
const debounce = require('lodash/debounce')
const throttle = require('lodash/throttle')
export default {
  computed: {
    swiper() {
      return this.$refs.swiper
    },
    body() {
      return this.$refs.body
    }
  },
  props: {
    value: [String, Number]
  },
  data() {
    return {
      i: 0,
      top: '0',
    }
  },
  watch: {
    i() {
      this.$emit('input', this.i)
      this.$emit('changeIndex', this.i)
    },
    // value() {
    //   this.i = this.value
    // }
  },
  mounted() {
    // this.$nextTick(() => {
      // this.onScroll()
    // })
  },
  methods: {
    // onScroll() {
    //   if (window.addEventListener) { //FF,火狐浏览器会识别该方法
    //     window.addEventListener('DOMMouseScroll', this.wheel, false);
    //   }
    //   this.swiper.onmousewheel = this.wheel
    //   this.swiper.onmousedown = this.onmousedown
    //   this.swiper.onmouseup = this.onmouseup
    // },
    mousedown(event) {
      // console.log(event.pageY)
      this.__pageY = event.pageY
    },
    // onmousemove(event) {
    //   console.log(event.pageY)
    // },
    mouseup(event) {
      let y = event.pageY - this.__pageY
      if(Math.abs(y) > 100) {
        if(y > 0) {
          this.handledebounce(1)
        } else {
          this.handledebounce(-1)
        }
      }
    },
    throttleWheel: throttle(function(event) {
      let delta = 0
      if (!event) event = window.event
      if (event.wheelDelta) { // IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
        delta = event.wheelDelta / 120
        if (window.opera) delta = -delta
      } else if (event.detail) {
        delta = -event.detail / 3
      }
      if (delta) {
        this.handledebounce(delta)
      }
    }, 600, {leading: true, trailing: false}),
    // wheel(event) {
    //   if(this.__isWheel) return
    //   this.__isWheel = true
    //   // console.log(this.body.clientHeight, this.$refs.swiper.clientHeight)
    //   let delta = 0
    //   if (!event) event = window.event
    //   if (event.wheelDelta) { // IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
    //     delta = event.wheelDelta / 120
    //     if (window.opera) delta = -delta
    //   } else if (event.detail) {
    //     delta = -event.detail / 3
    //   }
    //   if (delta) {
    //     this.handledebounce(delta)
    //   }
    // },
    handledebounce(delta) {
      if (delta < 0) { //向下滚动
        let i = this.i
        i++
        let top = i * this.swiper.clientHeight
        if(top >= this.body.clientHeight - this.swiper.clientHeight) {
          this.top = (this.body.clientHeight - this.swiper.clientHeight) * -1 + 'px'
          this.__onlate = true
          this.$emit('onlate', true)
        } else {
          this.i = i
          this.top = -top + 'px'
        }
      } else {
        setTimeout(() => {
          this.$emit('onlate', false)
        }, 600)
        if(this.i > 0 || this.__onlate) {
          this.__onlate = false
          let t = parseInt(this.top) * -1 - this.i * this.swiper.clientHeight
          if(t < this.swiper.clientHeight && t > 0) {
            this.top = parseInt(this.top) + t  + 'px'
          } else {
            this.i--
            if(this.i === 0) {
              this.top = '0px'
            } else {
              let t = parseInt(this.top) * -1 - this.i * this.swiper.clientHeight
              this.top = parseInt(this.top) + t + 'px'
            }
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .bo-swiper-container {
    position: absolute;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  .bo-swiper-body {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    margin-top: 0;
    transition: all .8s;
    justify-content: space-between;
  }
</style>